<!--
	作者：未来不是梦
	时间：2020-05-04
	描述：青春封面
-->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>五四新青年</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            color: red;
            background: url(img/青春.jpg) center center;
            background-size: cover;
            margin: 0px;
            padding: 0px;
        }

        .main {
            width: 100%;
            text-align: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        h1 {
            font-size: 54px;
            margin-bottom: 20px;
            letter-spacing: 40px;
        }

        p {
            font-size: 21px;
            margin-bottom: 40px;
        }

        a {
            font-size: 18px;
            color: red;
            border: 1px solid red;
            border-radius: 3px;
            padding: 10px 100px;
            text-decoration: none;
            background-image: linear-gradient(to bottom right, #F9957F, #F2F5D0);
        }
    </style>

</head>

<body>

    <div class="main">
        <h1>五四新青年</h1>
        <p>青春因磨砺而出彩，人生因奋斗而升华。不负青春不负梦，不负韶华不负心。</p>
        <a href="#" id="enroll">点击我</a>
    </div>

    <script>
        /*  var the_enroll = document.getElementById("enroll");
         the_enroll.onclick = function (e) {
         e.preventDefault();
         var msg = "奋斗的青春最美丽！";
         the_enroll.innerHTML = msg;
         the_enroll.style.background = "lightgoldenrodyellow";
         the_enroll.style.borderColor ="lightgoldenrodyellow";
     } */
        $('#enroll').click(function () {
            $(this).css({
                background: "lightgoldenrodyellow",
                borderColor: "lightgoldenrodyellow"
            });
            $(this).text("奋斗的青春最美丽！");
        })
    </script>

</body>

</html>